/**
 * @author truexin
 * @date   16/05/10
 */

import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {

    var RC = r.createClass,
        doAction = lf.bridgeJs.doAction,
        imgUrl = lf.imgUrl.yue,
        pic_list = [
            {
                img: imgUrl + 'rice.jpg',
                maskTxt: '今天我有空 ( 43个主题 )'
            }
        ],
        userName = [
            {
                img: imgUrl + 'rice.jpg',
                name: '没腿小强',
                title: '需要两男两女'
            }
        ];

    var Header = RC({
        componentDidMount: function () {

        },
        render: function () {
            var dt = this.props.picList[0];
            //console.log(dt);  //多用断点调试
            return (
                <header className="header">
                    <img src={dt.img}/>
                    <p className="bottom-mask">{dt.maskTxt}</p>
                </header>
            )
        }

    });

    var Panel = RC({
        componentDidMount: function () {

        },
        clickFn: function () {
            doAction("yue-detail.html", "约详情");
        },
        render: function () {
            return (
                <section className="panel">
                    <div className="panel-top">
                        <ul className="left">
                            <li>我们</li>
                            <li>没腿小强</li>
                            <li><i>25</i> 白羊座</li>
                        </ul>
                        <div className="right">
                            <h4 className="title">需要两男两女</h4>
                            <ul>
                                <li><span className="position">珠江小区2号饭堂</span> 10.86km</li>
                                <li>本周五晚：&nbsp;&nbsp;&nbsp;20:00-21:00 <i>AA</i></li>
                                <li>本周五晚上2男2女饭局，吃湘菜...</li>
                            </ul>
                        </div>
                        <i className="fixed-btn">约饭<br/>05</i>
                        <span className="far-time">刚刚</span>

                    </div>
                    <ul className="comment-num">
                        <li>预览 243</li>
                        <li>报名 06</li>
                        <li>评论 26</li>
                    </ul>
                </section>
            )
        }

    });

    var Body = RC({

        clickFn: function () {
            doAction("yue-main-detail.html", "约主题内容详情");
        },
        render: function () {
            return (
                <div className="yue-found">
                    <section className="panel" onTouchEnd={this.clickFn}>
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big3.png"/></li>
                                <li><span>没腿小强</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">需要两男两女</h4>
                                <ul>
                                    <li><span className="position">珠江小区2号饭堂</span> 10.86km</li>
                                    <li>本周五晚：20:00-21:00 <i>AA</i></li>
                                    <li><b>川湘菜</b></li>
                                </ul>
                            </div>
                            <a href="#" className="fixed-btn">约饭<br/>05</a>
                            <span className="far-time">刚刚</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 243</li>
                            <li>报名 06</li>
                            <li>评论 26</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big2.png"/></li>
                                <li><span>李磊</span></li>
                                <li><i className="male">&nbsp;25</i> 天秤座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">约个时间生长肌肉</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部</span> 10.86km</li>
                                    <li>本周五晚：18:00-23:00 <i className="run-meter">5KM</i></li>
                                    <li><b>室外</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn run">约跑<br/>03</i>
                            <span className="far-time">3小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 183</li>
                            <li>报名 10</li>
                            <li>评论 45</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big1.png"/></li>
                                <li><span>Kemmt</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯粹饿了 约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部集合</span> 1.06km</li>
                                    <li>本周五晚：13:00-19:00 <i>AA</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">2小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 643</li>
                            <li>报名 55</li>
                            <li>评论 70</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big1.png"/></li>
                                <li><span>Kemmt</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯粹饿了 约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部集合</span> 1.06km</li>
                                    <li>本周五晚：13:00-19:00 <i>AA</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">2小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 643</li>
                            <li>报名 55</li>
                            <li>评论 70</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big1.png"/></li>
                                <li><span>Kemmt</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯粹饿了 约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部集合</span> 1.06km</li>
                                    <li>本周五晚：13:00-19:00 <i>AA</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">2小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 643</li>
                            <li>报名 55</li>
                            <li>评论 70</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big1.png"/></li>
                                <li><span>Kemmt</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯粹饿了 约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部集合</span> 1.06km</li>
                                    <li>本周五晚：13:00-19:00 <i>AA</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">2小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 643</li>
                            <li>报名 55</li>
                            <li>评论 70</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li><img className="img-responsive" src="../public/images/yue/big1.png"/></li>
                                <li><span>Kemmt</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯粹饿了 约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区小卖部集合</span> 1.06km</li>
                                    <li>本周五晚：13:00-19:00 <i>AA</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">2小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 643</li>
                            <li>报名 55</li>
                            <li>评论 70</li>
                        </ul>
                    </section>

                </div>
            )
        }
    });

    r.render(
        <PullRefresh data={<Body />}/>,
        document.getElementById('root'), function () {

        }
    )

})(liefeng, React)